<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  1、利用定位+margin:auto
父级设置为相对定位，子级绝对定位 ，并且四个定位属性的值都设置了0，那么这时候如果子级没有设置宽高，则会和父元素宽高相同，完全覆盖

这里子元素设置了宽高，所以宽高会按照我们的设置来显示，但是实际上子级的虚拟占位已经撑满了整个父级，这时候再给它一个margin：auto它就可以上下左右都居中了
<style>
  .father{
      width:500px;
      height:300px;
      border:1px solid #0a3b98;
      position: relative;
  }
  .son{
      width:100px;
      height:40px;
      background: #f0a238;
      position: absolute;
      top:0;
      left:0;
      right:0;
      bottom:0;
      margin:auto;
  }
</style>
<div class="father">
  <div class="son"></div>
</div>


2、利用定位+margin:负值
<style>
  .father {
      position: relative;
      width: 200px;
      height: 200px;
      background: skyblue;
  }
  .son {
      position: absolute;
      top: 50%;
      left: 50%;
      margin-left:-50px;
      margin-top:-50px;
      width: 100px;
      height: 100px;
      background: red;
  }
</style>
<div class="father">
  <div class="son"></div>
</div>

初始位置为方块1的位置
当设置left、top为50%的时候，内部子元素为方块2的位置
设置margin为负数时，使内部子元素到方块3的位置，即中间位置
这种方案不要求父元素的高度，也就是即使父元素的高度变化了，仍然可以保持在父元素的垂直居中位置，水平方向上是一样的操作

但是该方案需要知道子元素自身的宽高，但是我们可以通过下面transform属性进行移动



3、利用定位+transform
translate(-50%, -50%)将会将元素位移自己宽度和高度的-50%

这种方法其实和最上面被否定掉的margin负值用法一样，可以说是margin负值的替代方案，并不需要知道自身元素的宽高
<style>
  .father {
      position: relative;
      width: 200px;
      height: 200px;
      background: skyblue;
  }
  .son {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%,-50%);
      width: 100px;
      height: 100px;
      background: red;
  }
</style>
<div class="father">
  <div class="son"></div>
</div>


4、table布局
<style>
  .father {
      display: table-cell;
      width: 200px;
      height: 200px;
      background: skyblue;
      vertical-align: middle;
      text-align: center;
  }
  .son {
      display: inline-block;
      width: 100px;
      height: 100px;
      background: red;
  }
</style>
<div class="father">
  <div class="son"></div>
</div>


5、flex布局
<style>
  .father {
      display: flex;
      justify-content: center;
      align-items: center;
      width: 200px;
      height: 200px;
      background: skyblue;
  }
  .son {
      width: 100px;
      height: 100px;
      background: red;
  }
</style>
<div class="father">
  <div class="son"></div>
</div>
css3中了flex布局，可以非常简单实现垂直水平居中

这里可以简单看看flex布局的关键属性作用：
display: flex时，表示该容器内部的元素将按照flex进行布局
align-items: center表示这些元素将相对于本容器水平居中
justify-content: center也是同样的道理垂直居中



6、gird布局
<style>
  .father {
      display: grid;
      align-items:center;
      justify-content: center;
      width: 200px;
      height: 200px;
      background: skyblue;

  }
  .son {
    width: 10px;
    height: 10px;
    border: 1px solid red
  }
</style>
<div class="father">
  <div class="son"></div>
</div>



</body>
</html>